<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Drag-down - Handsontable</title>

  <!--
  Loading Handsontable (full distribution that includes all dependencies apart from jQuery)
  -->
  <script data-jsfiddle="common" src="../lib/jquery.min.js"></script>
  <script data-jsfiddle="common" src="../dist/jquery.handsontable.full.js"></script>
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/jquery.handsontable.full.css">

  <!--
  Loading demo dependencies. They are used here only to enhance the examples on this page
  -->
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
  <script src="js/samples.js"></script>
  <script src="js/highlight/highlight.pack.js"></script>
  <link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">

  <!--
  Facebook open graph. Don't copy this to your project :)
  -->
  <meta property="og:title" content="Drag-down">
  <meta property="og:description"
        content="Notice the little square (fill handle) in the corner of the selected cell. You can drag it (drag-down)
          to repeat the values from the cell.">
  <meta property="og:url" content="http://handsontable.com/demo/dragdown.html">
  <meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="409">
  <meta property="og:image:height" content="164">
  <link rel="canonical" href="http://handsontable.com/demo/scroll.html">

  <!--
  Google Analytics for GitHub Page. Don't copy this to your project :)
  -->
  <script src="js/ga.js"></script>
</head>

<body>


<div class="wrapper">
  <div class="wrapper-row">
    <div id="global-menu-clone">
      <h1><a href="../index.html">Handsontable</a></h1>

    </div>

    <div id="container">
      <div class="columnLayout">

        <div class="rowLayout">
      <div class="descLayout">
        <div class="pad" data-jsfiddle="example1">
          <h2>Drag-down</h2>

          <p>Notice the little square (<b>fill handle</b>) in the corner of the selected cell. You can drag it
            (drag-down)
            to repeat the values from the cell.
          </p>

          <p>Double click the fill handle in cell B4 (value "30") to fill the selection down to the last value in
            neighbouring column, just like it would in LibreOffice or Google Docs.</p>

          <div id="example1"></div>

          <p>
            <button name="dump" data-dump="#example1" title="Prints current data source to Firebug/Chrome Dev Tools">
              Dump data to console
            </button>
          </p>
        </div>
      </div>

      <div class="codeLayout">
        <div class="pad">
          <div class="jsFiddle">
            <button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
          </div>

          <script data-jsfiddle="example1">
            $("#example1").handsontable({
              startRows: 8,
              startCols: 5,
              rowHeaders: true,
              colHeaders: true,
              minSpareRows: 1,
              fillHandle: true //possible values: true, false, "horizontal", "vertical"
            });

            var data = [
              ["", "Kia", "Nissan", "Toyota", "Honda"],
              ["2008", 10, 11, 12, 13],
              ["2009", 20, 11, 14, 13],
              ["2010", 30, 15, 12, 13],
              ["2011", "", "", "", ""],
              ["2012", "", "", "", ""]
            ];

            $("#example1").handsontable("loadData", data);
          </script>
        </div>
      </div>
    </div>

        <div class="footer-text">Handsontable &copy; 2012-2014 Marcin Warpechowski and contributors.<br> Code and documentation
          licensed under the The MIT License.
        </div>
      </div>

    </div>

  </div>
</div>

<div id="outside-links-wrapper"></div>

</body>
</html>